<template>
  <div class="carousel">
    <ul class="carousel-container">
      <li v-for="(image, index) in images" :key="index" class="carousel-item">
        <img :src="image" alt="Image">
      </li>
    </ul>
    <button @click="prevSlide">Prev</button>
    <button @click="nextSlide">Next</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      images: [
        'image1.jpg',
        'image2.jpg',
        'image3.jpg',
        // 更多图片路径
      ],
      currentSlide: 0,
      slideInterval: null
    }
  },
  mounted() {
    this.autoSlide();
  },
  beforeDestroy() {
    clearInterval(this.slideInterval);
  },
  methods: {
    autoSlide() {
      this.slideInterval = setInterval(() => {
        this.nextSlide();
      }, 3000); // 3秒自动切换到下一张
    },
    nextSlide() {
      this.currentSlide = (this.currentSlide + 1) % this.images.length;
    },
    prevSlide() {
      this.currentSlide = (this.currentSlide - 1 + this.images.length) % this.images.length;
    }
  }
}
</script>

<style scoped>
.carousel-container {
  display: flex;
  overflow: hidden;
}
.carousel-item {
  min-width: 100%;
  transition: transform 0.5s ease;
}
</style>
